<!--
圆角边框、盒子阴影、文字阴影
    - 都是CSS3新增的，都不会对其它盒子排列产生影响，不会占用布局空间！

圆角边框
    border-radius
        - 数值单位
        - 百分比

    四个角
        border-radius: 10px;                   // 四个角
        border-radius: 10px 20px;              // 左上/右下  右上/左下 （斜对角）
        border-radius: 10px 20px 30px;         // 左上  右上/左下  右下
        border-radius: 10px 20px 30px 40px;    // 左上 右上 右下 左下（顺时针）
    
    单独写
        border-top-left-radius      左上
        border-top-right-radius     右上
        border-bottom-left-radius   左下
        border-bottom-right-radius  右下

    应用
        若是正方形，只要设置半径为宽或高的一半，就变成圆。
        若是矩形，只要设置半径为较小边长的一半，就变成边角是椭圆的形状。
        若是矩形，只要设置半径为50%，就变成真正的椭圆。
-->
<style>
    .one {
        width: 200px;
        height: 100px;
        background: cyan;
        border-radius: 50px;
    }
    .two {
        width: 200px;
        height: 100px;
        background: cyan;
        border-radius: 50%;
    }
    .three {
        width: 100px;
        height: 100px;
        background: cyan;
        border-radius: 50px;
    }
    .four {
        width: 100px;
        height: 100px;
        background: cyan;
        border-radius: 50%;
    }
</style>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>